<!--
 * @Author: your name
 * @Date: 2021-11-02 10:20:30
 * @LastEditTime: 2022-01-18 18:47:00
 * @LastEditors: Please set LastEditors
 * @Description: 艺人列表
 * @FilePath: \star-cat-h5\src\views\artist\list.vue
-->
<template>
  <div>
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <div class="artist_list">
        <Empty v-if="emptyShow" />
        <van-list v-else v-model="loading" :finished="finished" @load="getList">
          <div class="list_item">
            <div
              v-for="item in list"
              :key="item.id"
              class="item_box"
              @click="
                () =>
                  $router.push({
                    path: '/artist_examine_details',
                    query: { id: item.id },
                  })
              "
            >
              <div class="artist_info">
                <van-image
                  width="44"
                  height="44"
                  radius="4"
                  class="img"
                  :src="item.avatar"
                />
                <div class="artist_msg">
                  <p class="name">{{ item.name }}</p>
                  <p class="nick_name">
                    {{ item.nick_name }} / {{ item.anchor_num }}
                  </p>
                </div>
              </div>

              <div class="right_icon_box">
                <div
                  v-if="item.examine_status != 100"
                  :class="['right_icon', examine[item.examine_status - 1].type]"
                >
                  <!-- {{ item.status_name }} -->
                  {{examine[item.examine_status - 1].status}}
                </div>
              </div>
            </div>
          </div>
        </van-list>
      </div>
    </van-pull-refresh>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { Toast } from "vant";
import Empty from "@/components/Empty";
import { reqExamineList } from "@/axios/artist";
export default {
  name: "artistList",
  components: {
    Empty,
  },
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      emptyShow: false,
      refreshing: false,
      form: {
        page: 1,
      },
      examine: [
        { status: "待审核", type: "primary" },
        { status: "已通过", type: "success" },
        { status: "已驳回", type: "danger" },
      ],
    };
  },
  computed: {
    ...mapGetters(["getUrlParam", "getIsLogin", "getReview_id"]),
    // getUrlParam() {
    //   return this.$store.getters.getUrlParam;
    // },
    // getIsLogin() {
    //   return this.$store.getters.getIsLogin;
    // },
    // getReview_id(){
    //   return this.$store.getters.getReview_id
    // }
  },
  created() {},
  methods: {
    getList() {
      this.emptyShow = false;
      if (this.refreshing) {
        this.list = [];
        this.refreshing = false;
      }
      this.loading = true;
      reqExamineList({ ...this.form, create_id: this.getReview_id })
        .then((res) => {
          console.log(res);
          let { list, count } = res;
          this.loading = false;
          this.list = [...this.list, ...list];
          this.finished = count <= this.list.length;
          this.form.page += 1;
          this.emptyShow = this.list.length == 0;
        })
        .catch((err) => {
          this.loading = false;
          this.finished = true;
          Toast.fail(err);
        });
    },
    onRefresh() {
      // 清空列表数据
      this.finished = true;
      this.form.page = 1;
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.getList();
    },
    async getAdminInfoByCode() {
      let vm = this;
      Toast.loading({
        duration: 0,
        message: "加载中...",
        overlay: true,
      });
      await this.$store.dispatch("getAdminInfoByCode");
      if (!vm.getIsLogin) {
        Toast.clear();
        Toast.fail("请求失败");
        /// 未登录
        return;
      }
      // console.log(this.getReview_id);

      /// 登录了  继续做些操作
    },
    addartist() {
      let infoData = {
        name: "", //姓名
        card_num: "", //身份证号
        card_url: "", //身份证url地址
        anchor: [
          {
            id: "", //主键
            anchor_num: "", //主播id
            platforms_id: "", //平台id
            platforms_name: "", //平台name
            is_main: true, //是否是主键1是 2否
          },
        ],
        wechat: "", //微信号
        mobile: "", //手机号
        star_scout: "", //星探
        star_scout_name: "",
        agent: "", //经纪人
        agent_name: "",
        remarks: "", //艺人备注 不超过300位
      };
      this.$store.dispatch("artist/setCurrent", 0);
      this.$store.dispatch("artist/setData", infoData);
      this.$router.push("/artist_add");
    },
  },
  mounted() {
    //未登录
    // console.log(this.getIsLogin);
    // if (!this.getIsLogin) {
    //   this.getAdminInfoByCode();
    // }
  },
};
</script>

<style scoped>
@import "./css/index.css";
@import "./css/listItem.css";
.artist_list {
  min-height: 80vh;
}
.add_new_data_box {
  height: 44px;
}
.add_new_data_box {
  position: fixed;
  bottom: 0;
}

.right_icon_box {
  display: flex;
  align-items: center;
  justify-content: center;
}

.right_icon {
  background: #fff8f7;
  border-radius: 15px;
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  padding: 2px 6px;
  text-align: center;
}

.right_icon.success {
  color: #5ec367;
  border: 1px solid #5ec367;
}

.right_icon.primary {
  border: 1px solid #5b97ff;
  color: #5b97ff;
}

.right_icon.danger {
  color: #ea6a6a;
  border: 1px solid #ea6a6a;
}
</style>


